<template>
  <van-cell
    title="单元格"
    value="内容"
    class="artical-item"
    :to="{
      name: 'artiacl',
      params: {
        articalId: artical.art_id,
      },
    }"
  >
    <!-- 定制标题 -->
    <template #title>
      <div class="title van-multi-ellipsis--l2">
        {{ artical.title }}
      </div>
    </template>
    <!-- 定制标题下方的内容 -->
    <template #label>
      <!-- 图片部分 -->
      <div v-if="artical.cover.type === 3" class="img-center">
        <div
          v-for="(item, index) in artical.cover.images"
          :key="index"
          class="img-flex"
        >
          <van-image fit="contain" :src="item" class="contain-img" />
        </div>
      </div>
      <!-- 信息部分 -->
      <div class="info">
        <span>发布作者：{{ artical.aut_name }}</span>
        <span>评论：{{ artical.comm_count }}</span>
        <span>发布时间：{{ artical.pubdate | relativeTime }}</span>
      </div>
    </template>
    <!-- 定制单元格右边的内容 -->
    <template #default>
      <div v-if="artical.cover.type === 1">
        <van-image
          fit="cover"
          :src="artical.cover.images[0]"
          class="right-img"
        />
      </div>
    </template>
  </van-cell>
</template>

<script>
export default {
  name: 'Articalitem',
  props: {
    // 此子组件接受一个参数对象，用于展示该对象的内容
    artical: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {};
  },
  methods: {},
};
</script>

<style lang="less" scoped>
.artical-item {
  // 设置标题
  .title {
    font-size: 32px;
    color: #3a3a3a;
  }
  .van-cell__value {
    // 去除右边图片的flex布局
    flex: unset;
    height: 146px;
    width: 232px;
    padding-left: 25px;
  }
  // 设置右边图片的大小
  .right-img {
    width: 232px;
    height: 146px;
  }
  // 设置中间图片的大小
  .img-center {
    display: flex;
    padding: 30px 0;
    .img-flex {
      flex: 1;
      height: 146px;
      /deep/ .contain-img {
        width: 100%;
        height: 146px !important;
      }
    }
  }
  // 设置下面信息部分的样式
  .info span {
    font-size: 22px;
    color: #b4b4b4;
    margin-right: 25px;
  }
}
</style>
